<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<html>
<head>
   <script type="text/javascript">


       function f1() {
           //主动
           //父节点，后置添加
            console.log($('#weiweiA').append('<li>wewe</li>').append('21221'))
           $('#weiweiA').append($('#weiweiB li:eq(1)'))
           //父节点前置
           $('#weiweiB').prepend('<li>eeee</li>')

           ///被动
           //被追加节点后置
           console.log($('<li>rrr</li>').appendTo($('#weiweiB')))//新节点
            console.log($('<li>qqq</li>').prependTo($('#weiweiB')))//已有节点追加(会有无力位置移动)
       }
       function f2() {
           //主动追加
           //兄弟节点后置追加
           $('#NO3').after('<li>after</li>')

           //兄弟节点前置追加
            $('#NO3').before('<li>before</li>')

           //被动追加
           //被追加节点.insertAfter(追加节点)
           $('<li>insertAfter</li>').insertAfter('#NOF')
           $('<li>insertBefore</li>').insertBefore('#NOH')
           $('#weiweiB li:first').insertAfter($('#NO3'))
       }

       function f3() {
           $('#NOJ').replaceWith('<li id="NOJ">JJJJJ</li>')//用新节点替换现有节点，被动替换
           $('#NOK').replaceWith($('#NOF'))//替换后原标签就不在了

            $('<li>I</li>').replaceAll('#NOM')//主动替换
       }
        function f4() {

        }
   </script>
    <style type="text/css">

    </style>
</head>
<body>
    <h2>节点追加(父子)</h2>
    <ul id="weiweiA">
        <li>A</li>
        <li>B</li>
        <li id="NO3">C</li>
        <li>D</li>
    </ul>

    <ul id="weiweiB">
        <li ID="NOE">E</li>
        <li id="NOF">F</li>
        <li>G</li>
        <li id="NOH">H</li>
        <li>I</li>
    </ul>

    <ul id="weiweiC">
        <li id="NOJ">J</li>
        <li id="NOK">K</li>
        <li>L</li>
        <li id="NOM">M</li>
        <li>I</li>
    </ul>
    <input type="button" value="节点添加" onclick="f1()">
    <input type="button" value="节点追加" onclick="f2()">
    <input type="button" value="节点替换" onclick="f3()">
    <input type="button" value="节点删除" onclick="f3()">
</body>
</html>
